<template>
	<i-drawer v-model="showBind" title="你确认要解绑该员工吗？" confirm_title="解绑" @confirm="confirm"></i-drawer>
	<view class="add_staff">
		<i-card top="32rpx" bottom="40rpx" border="1rpx solid #E5E5EA" v-if="id">
			<view class="card_item" v-if="userData?.userId">
				<image :src="userData?.userHeadUrl"></image>
				<view class="card_r">
					<text class="name">{{userData.nickName}}</text>
					<text>{{formData.mobile}}</text>
				</view>
			</view>
		</i-card>
		<view class="staff_body">
			<i-formItem title="员工姓名">
				<input type="text" v-model="formData.clerkName" placeholder="请输入员工姓名">
			</i-formItem>
			<i-formItem title="手机号" v-if="!id">
				<input type="text" v-model="formData.mobile" placeholder="请输入完整手机号搜索" @confirm="search"
					@input="handleClick">
			</i-formItem>
			<view class="userData" v-if="showData && !id">
				<view class="data" v-if="userData?.userId">
					<image :src="userData?.userHeadUrl"></image>
					<text>{{userData?.nickName}}</text>
				</view>
			</view>
			<view class="userQX" v-if="showData || id">
				<view class="qx_title">员工权限</view>
				<view class="qx_body">
					<checkbox-group @change="checkChange" style="width: 100%; display: flex; flex-wrap: wrap;">
						<view v-for="(item,index) in checkList" :key="item.value"
							style="margin-bottom: 40rpx; width: 220rpx;">
							<label>
								<checkbox :value="item.value" :checked="item.check" color="#FB652E"
									style="transform:scale(0.7)" />
								<text class="body_text">{{item.label}}</text>
							</label>
						</view>
					</checkbox-group>
				</view>
				<text>*提成统计：员工仅可查看自己的提成数据</text>
			</view>
			<view class="" style="height: 60rpx;"></view>
			<view class="buttons" v-if="id">
				<i-buttons :disabled="disabled" bgColor="#FB652E" color="#fff" radius="4" padding="18rpx 0"
					@click="toSave">保存</i-buttons>
				<view style="height: 32rpx"></view>
				<i-buttons border="#fff" color="#5C6D80" radius="4" padding="18rpx 0"
					@click="showBind = true">解绑</i-buttons>
			</view>
			<i-buttons v-else :disabled="disabled" bgColor="#FB652E" color="#fff" radius="4" padding="18rpx 0"
				@click="toInvite">立即邀请</i-buttons>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import _ from 'lodash'
	import {
		navTo,
		showTost,
		checkForm
	} from '../../utils/common'
	import {
		getUserByMobile,
		getclerkDetail
	} from '../../api/user'
	import {
		createClerk,
		updateClerk
	} from '../../api/store'
	import {
		computed,
		reactive,
		ref,
		watch
	} from 'vue'
	import { spaceReg } from '../../utils/regs';
	import {
		clerkdelete
	} from '../../api/store'
	import {
		onLoad,
		onReady
	} from '@dcloudio/uni-app'
	import useStore from '../../stores/index'

	const store = useStore()
	const formData = reactive<{
		clerkName ?: string;
		customerAuth ?: number;
		goodsAuth ?: number;
		id ?: string;
		mobile ?: string;
		orderAuth ?: number;
		serviceAuth ?: number;
		workOrderAuth ?: number;
		commissionAuth ?: number;
	}>({
		mobile: '',
		clerkName: '',
		workOrderAuth: 0,
		customerAuth: 0,
		goodsAuth: 0,
		orderAuth: 0,
		serviceAuth: 0,
		commissionAuth: 0
	})
	const userData = ref(null)
	const showData = ref(false)
	const id = ref('')
	const showBind = ref(false)
	const storeInfo = computed(() => {
		return store.storeInfo
	})
	const checkList = storeInfo.value.merType!='1'?ref([
		{
			label: '商品管理',
			value: 'goodsAuth',
			check: false
		},
		{
			label: '订单管理',
			value: 'orderAuth',
			check: false
		},
		{
			label: '工单管理',
			value: 'workOrderAuth',
			check: false
		},
		{
			label: '服务项目',
			value: 'serviceAuth',
			check: false
		},
		{
			label: '客户管理',
			value: 'customerAuth',
			check: false
		},
	]):ref([
		{
			label: '商品管理',
			value: 'goodsAuth',
			check: false
		},
		{
			label: '订单管理',
			value: 'orderAuth',
			check: false
		},
		{
			label: '客户管理',
			value: 'customerAuth',
			check: false
		},
	])

	const disabled = computed(() => {
		return !(userData?.value?.userId && formData.mobile && formData.clerkName)
	})

	onLoad((option) => {
		if (option.id) {
			id.value = option.id
			formData.clerkName = option.clerkName
			formData.mobile = option.mobile
			search()
			getChekList(option.mobile)
		}
		console.log(option, 'option');
	})
	onReady(() => {
		uni.setNavigationBarTitle({
			title: id.value ? '编辑员工' : '添加员工'
		})
	})

	const search = async () => {
		userData.value = {}
		const {
			data
		} = await getUserByMobile({
			mobile: formData.mobile
		})
		userData.value = data
		showData.value = true
	}

	const checkChange = (e : { detail : { value : Array<string> } }) => {
		const list = e.detail.value
		checkList.value.map((item : { value : string, check : boolean, label : string }) => {
			if (list.includes(item.value)) {
				item.check = true
			} else {
				item.check = false
			}
		})
	}
	const getChekList = async (mobile : string) => {
		const { data } = await getclerkDetail({ mobile })
		checkList.value.map(item => {
			item.check = data[item.value] === 0 ? false : true
		})
	}

	const toInvite = async () => {
		if (spaceReg.test(formData.mobile)) {
			showTost('手机号不能包含空格字符')
			return
		}
		if (spaceReg.test(formData.clerkName)) {
			showTost('姓名不能包含空格字符')
			return
		}
		if (formData.clerkName.length < 1 || formData.clerkName.length > 10) {
			showTost('请输入 1 ~ 10 个字员工姓名')
			return
		}
		checkList.value.map(item => {
			formData[item.value] = item.check ? 1 : 0
		})
		await createClerk(formData)
		showTost('邀请成功', () => {
			navTo('', 'navigateBack')
		})
	}

	const toSave = async () => {
		if (spaceReg.test(formData.clerkName)) {
			showTost('姓名不能包含空格字符')
			return
		}
		if (formData.clerkName.length < 1 || formData.clerkName.length > 10) {
			showTost('请输入 1 ~ 10 个字员工姓名')
			return
		}
		checkList.value.map(item => {
			formData[item.value] = item.check ? 1 : 0
		})
		await updateClerk({ ...formData, id: id.value })
		showTost('保存成功', () => {
			navTo('', 'navigateBack')
		})
	}
	const handleClick = _.debounce(search, 300, { leading: false, trailing: true })
	const confirm = async () => {
		await clerkdelete({ id: id.value })
		showTost('解绑成功', () => {
			navTo('', 'navigateBack')
		})
	}
</script>

<style lang="scss" scoped>
	.add_staff {
		width: 100%;
		height: 100vh;
		overflow: hidden;
		background-color: #fff;

		.card_item {
			@include flexR;

			.card_r {
				@include flexC;
				@include dfont(26rpx);
				color: #8E8E93;

				.name {
					@include titlefont;
					margin-bottom: 8rpx;
				}
			}
		}

		.staff_body {
			margin: 0 auto;
			width: calc(100% - 64rpx);

			input {
				width: 75%;
			}

			.userData {
				margin-top: 40rpx;
				border-bottom: 1rpx solid $line-color;
				padding-bottom: 40rpx;

				.data {
					@include flexR;

					text {
						@include titlefont;
					}
				}
			}

			.userQX {
				margin-top: 40rpx;
				@include flexC;

				.qx_title {
					@include titlefont;
				}

				.qx_body {
					margin-top: 40rpx;
					@include flexRS;
					width: 100%;

					.body_text {
						@include dfont;
					}
				}

				text {
					@include contentfont;
				}
			}
		}

		.buttons {
			@include flexC;
			width: 100%;
		}
	}

	image {
		width: 80rpx;
		height: 80rpx;
		border-radius: 80rpx;
		margin-right: 24rpx;
	}
</style>